<template>
  <div class="flex-lrb flex-nr-c mr-b15">
    <!-- 一级菜单 -->
    <div class=" flex-lrb flex-nr-c" v-if="ClassifyState.classifyListId==1">
      <el-button type="primary" icon="el-icon-plus" @click="addClassifyDialogOPen(1)">添加分类</el-button>
    </div>

    <!-- 二级菜单 -->
    <div class=" flex-lrb flex-nr-c" v-if="ClassifyState.classifyListId==2">
      <el-button type="primary" icon="el-icon-plus" @click="addClassifyDialogOPen(2)">添加分类</el-button>
      <!-- <el-input placeholder="请输入内容" v-model="ClassifyState.searchData.name" class="seach-width2">
        <el-select v-model="ClassifyState.searchData.classifyOneId" slot="prepend" placeholder="请选择一级分类" class="seach-select">
          <el-option v-for="(item,key) in ClassifyState.classifyOneOption" :key="key" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input> -->
    </div>

    <!-- 三级菜单 -->
    <div class=" flex-lrb flex-nr-c" v-if="ClassifyState.classifyListId==3">
      <el-button type="primary" icon="el-icon-plus" @click="addClassifyDialogOPen(3)">添加分类</el-button>
      <!-- <el-input placeholder="请输入内容" v-model="ClassifyState.searchData.name" class="seach-width3">
        <template slot="prepend">
          <el-select v-model="ClassifyState.searchData.classifyOneId" placeholder="请选择一级分类" class="seach-select" @change="staticSeachQuery">
            <el-option v-for="(item,key) in ClassifyState.classifyOneOption" :key="key" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select v-model="ClassifyState.searchData.classifyTwoId" placeholder="请选择二级分类" class="seach-select">
            <el-option v-for="(item,key) in ClassifyState.classifyTwoOption" :key="key" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </template>
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input> -->
    </div>
    <el-input placeholder="请输入分类名称" v-model="ClassifyState.searchData.name" class="seach-width">
      <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
    </el-input>
    <el-button type="primary" icon="el-icon-refresh-right" plain circle class="seach-refresh" @click="$router.go(0)"></el-button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  //import引入的组件
  components: {},
  //子组件引用父组件:data=data 方法@search=search使用this.emit('search', '参数');
  props: [],
  data () {
    return {};
  },
  computed: {
    ...mapState('Classify', { //使用如下 {{ ClassifyState.name }}  console.log(this.ClassifyState.name)
      ClassifyState: state => state
    }),
  },
  methods: {
    ...mapActions('Classify', [
      'list', 'seachQuery'
    ]),
    /**打开dialog */
    addClassifyDialogOPen (num) {
      this.ClassifyState.classifyRadio = num;
      this.ClassifyState.addDialog = true;
    },
    /**点击搜索 */
    search () {
      this['list']('');
    },
    /**查询分类 */
    staticSeachQuery () {
      this.ClassifyState.classifyRadio = 3;
      this.ClassifyState.addClassifyForm.classifyOneSelect = this.ClassifyState.searchData.classifyOneId;
      this.ClassifyState.searchData.classifyTwoId = '';
      this["seachQuery"]('参数');
    },
  },
  mounted () { },
};
</script>

<style>
/*搜索框长度*/
.seach-width {
  margin-left: 15px;
  width: 400px;
}

.seach-width2 {
  width: 550px;
  margin-left: 15px;
}

.seach-width3 {
  width: 700px;
  margin-left: 15px;
}

.seach-select {
  width: 150px;
}
.seach-refresh {
  padding: 0px !important;
  font-size: 16px !important;
  height: 30px !important;
  width: 30px !important;
  margin-left: 12px;
}
</style>